<template>
	<el-card>
		<div class="flex justify-between items-center tips" v-if="video.uploadVideoInfo.videoUrl">
			<div>你还有上次未发布的视频，是否继续编辑？</div>
			<div>
				<el-button type="primary" text="primary">
					<span class="font-bold" @click="proxy.$router.push('/uploadVideoDetail')">
						继续
					</span>
				</el-button>
				<el-button type="info" text="info"><span class="font-bold" @click="abandonUpload">放弃</span></el-button>
			</div>
		</div>
		<el-upload class="upload-demo" drag multiple :http-request="uploadFile" :show-file-list="false"
			v-loading="uploadLoading" element-loading-text="正在上传中...">
			<el-icon class="el-icon--upload">
				<upload-filled />
			</el-icon>
			<div class="el-upload__text">
				<div class="text-[#161823] text-[20px]">点击上传 或直接将视频文件拖入此区域</div>
				<div class="text-[#25263299] text-[12px] mt-[10px]">
					为了更好的观看体验和平台安全，平台将对上传的视频预审。超过40秒的视频建议上传横版视频
				</div>
			</div>
		</el-upload>
	</el-card>
</template>

<script setup>
import { UploadFilled } from '@element-plus/icons-vue'
import useStore from "@/store"
import { getCurrentInstance, ref } from "vue";
import { uploadFile as upload } from "@/utils/uplaodVideo"
import { DeleteFile } from "@/api/file"
import { ElMessage } from "element-plus";

const { video } = useStore()
const { proxy } = getCurrentInstance();
const uploadLoading = ref(false)

// 开始上传
const uploadFile = async ({ file }) => {
	// 上传文件到本地minio
	let res;
	uploadLoading.value = true
	try {
		res = await upload(file)
	} finally {
		uploadLoading.value = false
	}

	// 传递任务到store
	video.updateVideoInfo({
		videoUrl: res,
		description: "",
		coverUrl: "",
		title: ""
	});

	// 跳转到上传视频详情页面
	proxy.$router.push("/uploadVideoDetail")
}



// 放弃上传
const abandonUpload = async () => {
	// 执行删除视频接口
	try {
		await DeleteFile({ path: video.uploadVideoInfo.videoUrl })
		video.updateVideoInfo({
			videoUrl: undefined,
			description: "",
			coverUrl: "",
			title: ""
		})
		ElMessage.success("删除完成")
	} catch (e) {
	}
}

</script>

<style scoped lang="scss">
.tips {
	border: 1px solid rgba(28, 31, 35, .08);
	border-radius: 5px;
	margin-bottom: 10px;
	padding: 5px 10px;
}
</style>
